<template>
  <div>
    <div v-if="switchPage" class="cateContent">
      <!-- 新增试题 -->
      <el-row type="flex" justify="end" class="addbtn">
        <el-button type="primary" plain size="small" @click="switchPage=false">新增试题</el-button>
      </el-row>
      <el-form class="form" :model="queryparams">
        <!-- 学科名称、目录名称、标签名称 、试题类型-->
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科名称">
              <el-select v-model="queryparams.subject_id" placeholder="请选择学科" size="small" style="width:215px" clearable @change="subjectlist">
                <el-option v-for="item in subjectName" :key="item.id" :label="item.subject_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目录名称">
              <el-select v-model="queryparams.directory_id" placeholder="请选择目录" size="small" style="width:215px" clearable @change="catalogChange">
                <el-option v-for="item in catalogName" :key="item.id" :label="item.directory_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签名称">
              <el-select v-model="queryparams.tag_id" placeholder="请选择标签" size="small" clearable style="width:215px">
                <el-option v-for="item in tagName" :key="item.id" :label="item.tag_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="queryparams.quest_type" placeholder="选择题型" size="small" clearable style="width:215px">
                <el-option label="单选题" value="1" />
                <el-option label="多选题" value="2" />
                <el-option label="判断题" value="3" />
                <el-option label="简答题" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 审核状态、发布状态、创建者、试题难度 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="审核状态">
              <el-select v-model="queryparams.check_state" placeholder="请选择审核状态" clearable size="small" style="width:215px">
                <el-option label="待审核" value="1" />
                <el-option label="审核通过" value="2" />
                <el-option label="不通过" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发布状态">
              <el-select v-model="queryparams.show_state" placeholder="请选择发布状态" clearable size="small" style="width:215px">
                <el-option label="上架" value="1" />
                <el-option label="下架" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建者">
              <el-input v-model="queryparams.create_name" placeholder="请输入创建者" style="width:200px" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题难度">
              <el-select v-model="queryparams.difficulty" placeholder="请选择难度" clearable size="small" style="width:215px">
                <el-option label="简单" value="1" />
                <el-option label="中等" value="2" />
                <el-option label="困难" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 是否真题、创建时间、查询、重置 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="是否真题">
              <el-select v-model="queryparams.is_true_question" placeholder="请选择是否真题" clearable size="small" style="width:215px">
                <el-option label="是" value="1" />
                <el-option label="否" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker v-model="queryparams.create_time" value-format="timestamp" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:260px" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-row type="flex" justify="end">
              <el-button type="primary" size="small" @click="searchQuestion">查询</el-button>
              <el-button size="small" @click="resetQuestion">重置</el-button>
              <el-button v-if="ChangeTextMsg" type="warning" size="small" icon="el-icon-folder-add" plain @click="ToggleTextMSg" />
              <el-button v-else type="warning" size="small" icon="el-icon-folder-remove" plain @click="ToggleTextMSg" />
            </el-row>
          </el-col>

        </el-row>
      </el-form>
      <!-- 批量上下架、批量通过 -->
      <el-row v-if="batchFlag" style="margin:10px 0px 18px ">
        <el-button type="success" size="small" @click="batchUp(1)">批量上架</el-button>
        <el-button type="warning" size="small" @click="batchUp(2)">批量下架</el-button>
        <el-button type="primary" size="small" @click="PassQuestion">批量通过</el-button>
      </el-row>
      <!-- 表格区域 -->
      <el-table ref="multipleTable" fit :data="questData" border tooltip-effect="dark" style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <!-- 试题信息 -->
        <el-table-column label="试题信息" show-overflow-tooltip style="padding:0px">
          <template slot-scope="props">
            <el-row type="flex" justify="start" style="height:30px">
              <el-col :span="2">ID:{{ props.row.id }}</el-col>
              <el-col :span="22">题干信息：
                <el-link type="primary" style="line-height: 0px;" @click="questPreview(props.row.id)">
                  <template>
                    <span v-html="props.row.question" />
                  </template>
                </el-link>
              </el-col>
            </el-row>
            <div v-if="ChangeTextMsg">
              <el-row type="flex" justify="space-around">
                <el-col :span="9">
                  试题编号：{{ props.row.quest_num }}
                </el-col>
                <el-col :span="5">试题类型：
                  <span v-if="props.row.quest_type===1">单选题</span>
                  <span v-if="props.row.quest_type===2">多选题</span>
                  <span v-if="props.row.quest_type===3">判断题</span>
                  <span v-if="props.row.quest_type===4">简答题</span>
                </el-col>
                <el-col :span="5">归属学科:{{ props.row.subject_name }}</el-col>
                <el-col :span="5">收录目录:{{ props.row.directory_name }}</el-col>
              </el-row>
              <el-row type="flex" justify="space-around">
                <el-col :span="9">
                  标签信息：{{ props.row.tag_info.join(',') }}
                </el-col>
                <el-col :span="5">发布状态：
                  <el-tag v-if="props.row.show_state===2" size="small" type="info">下架</el-tag>
                  <el-tag v-else size="small" type="success">上架</el-tag>
                </el-col>
                <el-col :span="5">审核人:暂无</el-col>
                <el-col :span="5">审核状态:
                  <el-tag v-if="props.row.check_state===1" size="small" type="warning">待审核</el-tag>
                  <el-tag v-else-if="props.row.check_state===2" size="small" type="success">通过</el-tag>
                  <el-tag v-else size="small" type="danger">不通过</el-tag>
                </el-col>
              </el-row>
              <el-row type="flex" justify="space-around">
                <el-col :span="9">
                  <span v-if="props.row.check_remarks!==''">审核意见:{{ props.row.check_remarks }}</span>
                  <span v-else>审核意见:暂无</span>
                </el-col>
                <el-col :span="5">创建人:{{ props.row.create_name }}</el-col>
                <el-col :span="5">难度:
                  <span v-if="props.row.difficulty===1">简单</span>
                  <span v-else-if="props.row.difficulty===2">中等</span>
                  <span v-else>困难</span>
                </el-col>
                <el-col :span="5">发布时间:{{ new Date(props.row.created_at).toLocaleDateString() }}</el-col>
              </el-row>
            </div>
            <el-descriptions v-else :column="5">
              <el-descriptions-item label="归属学科">{{ props.row.subject_name }}</el-descriptions-item>
              <el-descriptions-item label="归属目录">{{ props.row.directory_name }}</el-descriptions-item>
              <el-descriptions-item label="标签信息">{{ props.row.tag_info.join(',') }}</el-descriptions-item>
              <el-descriptions-item label="发布状态">
                <el-tag size="small">下架</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="发布时间">{{ new Date(props.row.created_at).toLocaleDateString() }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column prop="address" label="操作" show-overflow-tooltip align="center" width="159" style="font-size:12px">
          <template #default="{row}">
            <el-row v-if="row.show_state===2" style="margin-top:30px">
              <el-row type="flex" justify="space-between">
                <el-col v-if="row.check_state===1"><el-link :underline="false" type="primary" icon="el-icon-edit" style="font-size:12px" @click="checkQuest(row.id)">审核</el-link></el-col>
                <el-col v-else><el-link :underline="false" type="primary" icon="el-icon-edit" style="font-size:12px" @click="showOrhideBtn(row.id,1)">上架</el-link></el-col>
                <el-col><el-link :underline="false" type="primary" icon="el-icon-edit" style="font-size:12px" @click="switchPageList(row.id)">修改</el-link></el-col>
              </el-row>
              <el-row align="center">
                <el-col><el-link :underline="false" type="primary" icon="el-icon-delete" style="font-size:12px" @click="DelQuestion(row.id)">删除</el-link></el-col>
              </el-row>
            </el-row>
            <el-row v-else style="margin-top:25px">
              <el-col><el-link :underline="false" type="primary" icon="el-icon-edit" style="font-size:12px" @click="showOrhideBtn(row.id,2)">下架</el-link></el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
      <el-pagination :current-page="queryparams.page" :page-sizes="[2, 5, 10, 20]" :page-size="queryparams.limit" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <div v-else class="cateContent">
      <el-row type="flex" justify="space-between" style="padding:10px 20px">
        <div style="font-weight: 700;">{{ QuestionTitle }}</div>
        <div><el-button type="primary" plain size="small" @click="backToQuestionList">返回列表</el-button></div>
      </el-row>
      <hr style="margin:0px;">
      <el-form ref="questionList" label-width="150px" style="margin:20px 0px 20px" :model="questionList" :rules="rules">
        <!-- 学科方向、目录信息、标签信息 -->
        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="学科名称" prop="subject_id">
              <el-select v-model="questionList.subject_id" placeholder="归属学科" size="small" style="width:215px" clearable @change="addsubjectlist">
                <el-option v-for="item in subjectName" :key="item.id" :label="item.subject_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目录信息" prop="directory_id">
              <el-select v-model="questionList.directory_id" placeholder="归属目录" size="small" style="width:215px" clearable @change="addcatalogChange">
                <el-option v-for="item in catalogName" :key="item.id" :label="item.directory_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标签信息" prop="tag_id">
              <el-select v-model="questionList.tag_id" multiple placeholder="技能标签" size="small" style="width:215px" @change="tagChange">
                <el-option v-for="item in tagName" :key="item.id" :label="item.tag_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 试题难度、试题类型、是否面试真题 -->
        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="试题难度" prop="difficulty">
              <el-radio-group v-model="questionList.difficulty">
                <el-radio :label="1">简单</el-radio>
                <el-radio :label="2">中等</el-radio>
                <el-radio :label="3">较难</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="试题类型" prop="quest_type">
              <el-select v-model="questionList.quest_type" placeholder="选择题型" size="small" clearable style="width:215px">
                <el-option label="单选题" :value="1" />
                <el-option label="多选题" :value="2" />
                <el-option label="判断题" :value="3" />
                <el-option label="简答题" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否面试真题" prop="is_true_question">
              <el-radio v-model="questionList.is_true_question" :label="1">是</el-radio>
              <el-radio v-model="questionList.is_true_question" :label="2">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 题干信息 -->
        <el-form-item label="题干信息" style="margin:0px 0px 22px;" prop="question">
          <quill-editor v-model="questionList.question" style="height: 200px; min-height: auto; margin-bottom:80px;width:100%" :options="editorOption" />
        </el-form-item>
        <el-form-item label="试题答案" prop="quest_type">
          <!-- 单选题 -->
          <el-table v-if="questionList.quest_type===1" :data="radioList" border style="width: 1430px">
            <el-table-column label="单选项" width="100" align="center">
              <template #default="{row}">
                <!-- 绑定answer单选 -->
                <el-radio v-model="questionList.quest_answer" :label="row.code" @change="radioChange">{{ row.code }}</el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="单选项内容" align="center">
              <template #default="{row}">
                <el-input v-model="row.content" type="textarea" placeholder="请输入选项内容" />
              </template>
            </el-table-column>
            <el-table-column label="选项图片" width="160" align="center" />
            <el-table-column prop="address" label="操作" width="140" align="center">
              <template #default="{row, $index }">
                <el-button v-if="$index+1===radioList.length" type="danger" icon="el-icon-delete" size="small" circle />
                <el-button v-if="$index+1===radioList.length" type="success" icon="el-icon-plus" size="small" circle />
              </template>
            </el-table-column>
          </el-table>
          <!-- 多选题 -->
          <el-table v-else-if="questionList.quest_type===2" :data="checkboxList" border style="width: 1430px">
            <el-table-column prop="date" label="多选项" width="100" align="center">
              <template #default="{row}">
                <el-checkbox-group v-model="row.is_true">
                  <el-checkbox :label="true">{{ row.code }}</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="多选项内容" align="center">
              <template #default="{row}">
                <el-input v-model="row.content" type="textarea" placeholder="请输入选项内容" />
              </template>
            </el-table-column>
            <el-table-column label="选项图片" width="160" align="center" />
            <el-table-column prop="address" label="操作" width="140" align="center">
              <template #default="{row, $index }">
                <el-button v-if="$index+1===checkboxList.length" type="danger" icon="el-icon-delete" size="small" circle @click.native="delBtnRow($index)" />
                <el-button v-if="$index+1===checkboxList.length" type="success" icon="el-icon-plus" size="small" circle @click.native="addBtnRow($index)" />
              </template>
            </el-table-column>
          </el-table>
          <!-- 判断题 -->
          <span v-else-if="questionList.quest_type===3">
            <el-radio v-model="questionList.quest_answer" label="正确">正确</el-radio>
            <el-radio v-model="questionList.quest_answer" label="错误">错误</el-radio>
          </span>
          <!-- 简答题 -->
          <quill-editor v-else-if="questionList.quest_type===4" v-model="questionList.quest_answer" style="height: 200px; min-height: auto; margin-bottom:80px;width:100%" :options="editorOption" />
          <!-- 默认文本 -->
          <el-row v-else>请选择试题类型，生成答案模板</el-row>
        </el-form-item>
        <el-form-item label="答案解析">
          <quill-editor v-model="questionList.quest_remark" style="height: 200px; min-height: auto; margin-bottom:80px;width:100%" :options="editorOption" />
        </el-form-item>
        <el-form-item style="margin:50px 0px 50px">
          <el-button type="primary" @click="addQuestionlist">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 试题预览弹窗 -->
    <el-dialog v-for="item in previewList" title="试题预览" :visible.sync="dialogVisible" width="65%" style="font-size:14px">
      <el-divider>基本信息</el-divider>
      <span>
        <template>
          <el-row type="flex" justify="space-between" style="margin-bottom:10px">
            <el-col :span="9">
              试题编号:{{ item.quest_num }}
            </el-col>
            <el-col :span="5">试题类型:
              <span v-if="item.quest_type===1">单选题</span>
              <span v-if="item.quest_type===2">多选题</span>
              <span v-if="item.quest_type===3">判断题</span>
              <span v-if="item.quest_type===4">简答题</span>
            </el-col>
            <el-col :span="5">归属学科:{{ item.subject_name }}</el-col>
            <el-col :span="5">收录目录:{{ item.directory_name }}</el-col>
          </el-row>
          <el-row type="flex" justify="space-between" style="margin-bottom:5px">
            <el-col :span="9">
              标签信息：{{ item.tag_info.join(',') }}
            </el-col>
            <el-col :span="5">
              发布状态：
              <el-tag v-if="item.show_state!==1" size="small" type="info">下架</el-tag>
              <el-tag v-else size="small" type="success">上架</el-tag>
            </el-col>
            <el-col :span="5">审核人:暂无</el-col>
            <el-col :span="5">审核状态:
              <el-tag v-if="item.check_state===1" size="small" type="warning">待审核</el-tag>
              <el-tag v-else-if="item.check_state===2" size="small" type="success">通过</el-tag>
              <el-tag v-else size="small" type="danger">不通过</el-tag>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="9">
              <span v-if="item.check_remarks!==''">审核意见：{{ item.check_remarks }}</span>
              <span v-else>审核意见：暂无</span>
            </el-col>
            <el-col :span="5">创建人:{{ item.create_name }}</el-col>
            <el-col :span="5">难度:
              <span v-if="item.difficulty===1">简单</span>
              <span v-else-if="item.difficulty===2">中等</span>
              <span v-else>困难</span>
            </el-col>
            <el-col :span="5">发布时间:{{ new Date(item.created_at).toLocaleDateString() }}</el-col>
          </el-row>
        </template>
      </span>
      <el-divider>试题信息</el-divider>
      <el-row>
        <el-col>题干信息：
          <el-link type="primary" style="line-height: 0px;">
            <template>
              <span v-html="item.question" />
            </template>
          </el-link>
        </el-col>
        <!-- <el-col>选项信息：简答题，无选项</el-col> -->
        <el-col>选项信息：
          <span v-if="questionList.quest_options===[]||questionList.quest_options==='[]'">简答题,无选项</span>
          <el-checkbox v-for="(item,index) in questionList.quest_options" v-else :key="index" :value="item.is_true" :label="item.code+item.content" />
        </el-col>
      </el-row>
      <el-divider>答案信息</el-divider>
      <el-row>
        <el-col>正确答案：
          <template>
            <p style="margin-left:70px;color:#409eff" v-html="item.quest_answer" />
          </template>
        </el-col>
        <el-col>答案解析：
          <template>
            <span v-if="item.quest_remark!==''" v-html="item.quest_remark" />
            <span v-else>暂无解析</span>
          </template>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 审核弹框 -->
    <el-dialog title="试题审核" :visible.sync="checkDialog" width="30%" @close="CheckDialog">
      <el-form label-width="80px" :model="querychecklist">
        <el-form-item label="审核结果">
          <el-radio v-model="querychecklist.check_state" :label="2">通过</el-radio>
          <el-radio v-model="querychecklist.check_state" :label="3">不通过</el-radio>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input v-model="querychecklist.check_remarks" type="textarea" style="width:430px;" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
      <el-row style="margin-left:80px">
        <el-button type="primary" @click="checkOkBtn">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { getQuestionlist, getSubjectList, getCatalogList, getTagList, UpQuestion, checkPass, delQuestion, addQuestion, getQuestionDetail, editQuestion } from '@/api/exam/question'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      checkDialog: false, // 审核弹框
      placeholder: '请输入内容',
      radioList: [
        { code: 'A', content: '', is_true: false, pic: '' },
        { code: 'B', content: '', is_true: false, pic: '' },
        { code: 'C', content: '', is_true: false, pic: '' },
        { code: 'D', content: '', is_true: false, pic: '' }
      ],
      // 多选数组
      checkboxList: [
        { code: 'A', content: '', is_true: false, pic: '' },
        { code: 'B', content: '', is_true: false, pic: '' },
        { code: 'C', content: '', is_true: false, pic: '' },
        { code: 'D', content: '', is_true: false, pic: '' }
      ],
      checkboxBtn: ['C', 'D', 'E', 'F'],
      // 判断题
      judgeList: [
        { code: '正确', content: '', is_true: true, pic: '' },
        { code: '错误', content: '', is_true: false, pic: '' }
      ],
      switchPage: true, // 新增编辑页面的显示隐藏
      dialogVisible: false, // 弹窗显示隐藏
      ChangeTextMsg: true, // 试题信息切换
      BtnFlag: true, // 上架下架状态
      batchFlag: false, // 批量上下线按钮显示或隐藏
      questData: [], // 渲染表单的数组
      multipleSelection: [],
      previewList: [], // 预览弹框
      // 新增题库数据所要携带的参数
      questionList: {
        difficulty: 1, // 试题难度简单：1，中等2，困难：3
        directory_id: null, // 目录id
        is_true_question: 2, // 真题：1，非真题2
        quest_answer: '', // quest_options中code的答案
        quest_options: [], // 单、多选选择题code为A、B、C....，判断题code为正确、错误，[{"code":"A","content":"啊啊啊","is_true":false,"pic":""}]
        quest_remark: '', // 答案解析
        quest_type: null, // 单选题：1，多选题：2，判断题：3，简答题：4
        question: '', // 题干信息
        subject_id: null, // 学科id
        tag_id: [] // 标签id
      },
      rules: {
        difficulty: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        directory_id: [
          { required: true, message: '请选择目录', trigger: 'blur' }
        ],
        is_true_question: [
          { required: true, message: '请选择试题类型', trigger: 'blur' }
        ],
        quest_answer: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        quest_type: [
          { required: true, message: '请选择试题类型', trigger: 'blur' }
        ],
        question: [
          { required: true, message: '请输入题干内容', trigger: 'blur' }
        ],
        subject_id: [
          { required: true, message: '请选择学科', trigger: 'blur' }
        ],
        tag_id: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      // // 新增题库数据所要携带的参数
      // questionList: {
      //   check_id: null, // 审核人id,默认应该为14
      //   check_remarks: null, // 审核是否通过
      //   check_state: 1, // 待审核的状态：1，审核通过状态：2，审核不通过状态：3
      //   check_time: null, // 审核的时间
      //   check_username: '', // 审核人名字
      //   create_name: '',
      //   created_at: null, // 题目创建时间
      //   creator_id: null, // 出题人id,默认应该为14
      //   difficulty: 1, // 试题难度简单：1，中等2，困难：3
      //   directory_id: null, // 目录id
      //   directory_name: '', // 目录名称
      //   id: 116, // 这个id应该是添加之后自己生成的
      //   is_true_question: 2, // 真题：1，非真题2
      //   quest_answer: '', // quest_options中code的答案
      //   quest_num: '', // 题目编码随机生成
      //   quest_options: [], // 单、多选选择题code为A、B、C....，判断题code为正确、错误，[{"code":"A","content":"啊啊啊","is_true":false,"pic":""}]
      //   quest_remark: '', // 答案解析
      //   quest_type: null, // 单选题：1，多选题：2，判断题：3，简答题：4
      //   question: '', // 题干信息
      //   show_state: null, // 上架：1，下架：2
      //   subject_id: null, // 学科id
      //   subject_name: '', // 学科名称
      //   tag_id: '', // 标签id
      //   tag_info: []// 标签名称
      // },
      // 审核所要携带的参数
      querychecklist: {
        id: '',
        check_state: 1,
        check_remarks: ''
      },
      // 获取题库数据所要携带的参数
      queryparams: {
        page: 1,
        limit: 10,
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: '',
        quest_type: '',
        is_true_question: '',
        show_state: '',
        check_state: '',
        create_name: '',
        create_time: null

      },
      total: 0,
      // 获取学科名称所要携带的参数
      querySubject: {
        subject_name: '',
        is_show: '',
        page: 1,
        limit: 10
      },
      // 学科名称列表
      subjectName: [],
      // 获取目录名称所要携带的参数
      queryCatalog: {
        subject_id: '',
        directory_name: '',
        is_show: '',
        page: 1,
        limit: 10
      },
      // 目录名称
      catalogName: [],
      // 获取标签名称所要携带的参数
      queryTag: {
        subject_id: '',
        directory_id: '',
        tag_name: '',
        is_show: '',
        page: 1,
        limit: 10
      },
      // 标签名称
      tagName: [],
      checklist: []
    }
  },
  computed: {
    editorOption() {
      return {
        placeholder: this.placeholder
      }
    },
    QuestionTitle() {
      return this.questionList.id ? '修改试题' : '添加试题'
    }
  },
  watch: {
    // 监听判断题
    judgeList: {
      deep: true,
      handler(val) {
        this.judgeList.forEach(item => {
          item.is_true = false
        })
        this.judgeList.forEach(item => {
          if (item.code === val.quest_answer) {
            item.is_true = true
          }
        })
      }
    },
    // 监听多选题
    checkboxList: {
      deep: true,
      handler(val) {
        this.questionList.quest_options = val
        const trueList = []
        this.questionList.quest_options.forEach((item) => {
          if (item.is_true === true) {
            trueList.push(item.code)
          }
        })
        this.questionList.quest_answer = trueList.join(',')
      }
    }
  },
  created() {
    this.initQuestionData()
    this.subjectlist()
    this.catalogChange()
    this.addsubjectlist()
    this.addcatalogChange()
  },
  methods: {
    // 监听单选题的变化
    radioChange(val) {
      this.radioList.forEach(item => {
        if (item.code === val) {
          item.is_true = true
        } else {
          item.is_true = false
        }
      })
      this.questionList.quest_options = this.radioList
    },
    // 点击返回列表，返回到题库列表，重置添加列表
    backToQuestionList() {
      this.questionList = {
        difficulty: 1, // 试题难度简单：1，中等2，困难：3
        directory_id: null, // 目录id
        is_true_question: 2, // 真题：1，非真题2
        quest_answer: '', // quest_options中code的答案
        quest_options: [], // 单、多选选择题code为A、B、C....，判断题code为正确、错误，[{"code":"A","content":"啊啊啊","is_true":false,"pic":""}]
        quest_remark: '', // 答案解析
        quest_type: null, // 单选题：1，多选题：2，判断题：3，简答题：4
        question: '', // 题干信息
        subject_id: null, // 学科id
        tag_id: [] // 标签id
      }
      this.radioList = [
        { code: 'A', content: '', is_true: false, pic: '' },
        { code: 'B', content: '', is_true: false, pic: '' },
        { code: 'C', content: '', is_true: false, pic: '' },
        { code: 'D', content: '', is_true: false, pic: '' }
      ]
      // 多选数组
      this.checkboxList = [
        { code: 'A', content: '', is_true: false, pic: '' },
        { code: 'B', content: '', is_true: false, pic: '' },
        { code: 'C', content: '', is_true: false, pic: '' },
        { code: 'D', content: '', is_true: false, pic: '' }
      ]
      this.switchPage = !this.switchPage
    },
    // 减少按钮
    delBtnRow() {
      if (this.checkboxList.length < 3) return this.$message.error('最少两个选项')
      this.checkboxList.pop()
    },
    // 新增多选按钮
    addBtnRow($index) {
      if (this.checkboxList.length > 5) return this.$message.error('选项不能超过6个')
      this.checkboxList.push({ code: this.checkboxBtn[$index - 1], content: '', is_true: false, pic: '' })
    },
    // 添加题库信息
    async addQuestionlist() {
      await this.$refs.questionList.validate()
      // 单选题
      try {
        if (this.questionList.quest_type === 1) {
          this.questionList.quest_options = this.radioList
        }
        // 判断题
        if (this.questionList.quest_type === 3) {
          this.questionList.quest_options = this.judgeList
        }
        // 简答题
        if (this.questionList.quest_type === 4) {
          this.questionList.quest_options = []
        }
        // 多选题
        if (this.questionList.quest_type === 2) {
          this.questionList.quest_options = this.checkboxList
        }
        if (this.questionList.id) {
          await editQuestion(this.questionList)
          this.initQuestionData()
          this.$message.success('编辑成功')
          this.backToQuestionList()
        } else {
          await addQuestion(this.questionList)
          this.initQuestionData()
          this.$message.success('添加成功')
          this.backToQuestionList()
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 删除功能
    DelQuestion(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delQuestion(id)
        this.$message.success('删除成功')
        this.initQuestionData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量通过
    PassQuestion() {
      this.$confirm(`确定批量通过${this.multipleSelection.length}条数据吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = this.multipleSelection.map(item => item.id)
        res.forEach(item => {
          this.checklist.push(
            { id: item, check_remarks: '通过，暂无问题', check_state: 2 }
          )
        })
        checkPass({ checklist: this.checklist })
        this.initQuestionData()
        this.$message.success('批量审核通过成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量上架
    batchUp(state) {
      this.$confirm(`确定批量上架${this.multipleSelection.length}条数据吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = this.multipleSelection.map(item => item.id)
        await UpQuestion({ id: res, show_state: state })
        if (state === 1) {
          this.$message.success(`成功上架${res.length}条数据`)
        } else {
          this.$message.success(`成功下架${res.length}条数据`)
        }
        this.initQuestionData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 审核通过
    async checkOkBtn() {
      await checkPass({ checklist: [this.querychecklist] })
      this.initQuestionData()
      this.checkDialog = false
    },
    // 审核
    checkQuest(id) {
      this.querychecklist.id = id
      this.checkDialog = true
    },
    // 上架、下架按钮的显示与隐藏
    async showOrhideBtn(id, state) {
      await UpQuestion({ id: [id], show_state: state })
      this.initQuestionData()
    },
    // 关闭审核弹框
    CheckDialog() {

    },
    // 重置功能
    resetQuestion() {
      this.queryparams = {
        page: 1,
        limit: 10,
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: '',
        quest_type: '',
        is_true_question: '',
        show_state: '',
        check_state: '',
        create_name: '',
        create_time: ''
      }
      this.initQuestionData()
    },
    // 搜索功能
    searchQuestion() {
      if (this.queryparams.create_time) {
        this.queryparams.create_time = this.queryparams.create_time.join(',')
      }
      this.initQuestionData()
    },
    // 获取学科列表
    async subjectlist() {
      const res = await getSubjectList(this.querySubject)
      this.subjectName = res.list
      const catalog = await getCatalogList(this.queryCatalog)
      const cataname = catalog.list.filter(item => item.subject_id === this.queryparams.subject_id)
      this.catalogName = cataname
    },
    // 添加====获取学科列表
    async addsubjectlist() {
      const res = await getSubjectList(this.querySubject)
      this.subjectName = res.list
      const catalog = await getCatalogList(this.queryCatalog)
      const cataname = catalog.list.filter(item => item.subject_id === this.questionList.subject_id)
      this.catalogName = cataname
    },
    // 学科名称变化获取对应的标签名称
    async catalogChange() {
      const res = await getTagList(this.queryTag)
      const taglist = res.list.filter(item => item.directory_id === this.queryparams.directory_id)
      this.tagName = taglist
    },
    // 添加====学科名称变化获取对应的标签名称
    async addcatalogChange() {
      const res = await getTagList(this.queryTag)
      const taglist = res.list.filter(item => item.directory_id === this.questionList.directory_id)
      this.tagName = taglist
    },
    // 标签信息
    tagChange(val) {

    },
    // 试题预览
    questPreview(id) {
      this.dialogVisible = true
      const previewList = this.questData.filter(item => item.id === id)
      this.previewList = previewList
      this.questionList.quest_options = JSON.parse(previewList[0].quest_options)
    },
    // 获取题库信息
    async initQuestionData() {
      const result = await getQuestionlist(this.queryparams)
      this.questData = result.list
      this.total = result.total
    },
    // 分页部分
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.queryparams.limit = val
      this.initQuestionData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.queryparams.page = val
      this.initQuestionData()
    },
    // 点击修改获取题库详细信息
    async switchPageList(id) {
      this.switchPage = !this.switchPage
      // console.log(this.questionList.id)
      const res = await getQuestionDetail(id)
      if (res.quest_type === 2) {
        this.checkboxList = JSON.parse(res.quest_options)
      }
      if (res.quest_type === 1) {
        this.radioList = JSON.parse(res.quest_options)
      }
      this.questionList = res
      this.questionList.tag_id = res.tag_id.split(',')
    },
    // 试题信息切换
    ToggleTextMSg() {
      this.ChangeTextMsg = !this.ChangeTextMsg
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 批量按键显示隐藏
    handleSelectionChange(val) {
      this.multipleSelection = val
      val.length > 0 ? this.batchFlag = true : this.batchFlag = false
    }
  }
}
</script>
<style lang="scss" scoped>
.cateContent {
  // margin: 20px;
  padding: 0px 20px 20px;
  background-color: #ffffff;
  .addbtn {
    padding: 16px;
  }
  .form {
    padding: 0px 16px;
  }
  :deep .el-descriptions-item__cell {
    padding-bottom: 0px;
  }
}
</style>
